<template>
	<view class="page_bg">
		<u-toast ref="uToast" />
		<view class="list_item" @tap="chooseAvatar">
			<view class="item_left">头像</view>
			<view class="item_right">
				<u-avatar :src="avatar || '../../static/member/avatra.png'"></u-avatar>
				<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png"></image>
			</view>
		</view>
		<view class="list_item" @tap="navigateTo(`./personal-data-second?type=nickname&text=${userData.nickname}`)">
			<view class="item_left">昵称</view>
			<view class="item_right">
				<text>{{userData.nickname}}</text>
			</view>
		</view>
		<view class="list_item" @tap="genderShow = true">
			<view class="item_left">性别</view>
			<view class="item_right">
				<text v-if="vk.pubfn.isNull(userData.gender)">未设置</text>
				<text v-if="userData.gender == 1">男</text>
				<text v-if="userData.gender == 2">女</text>
				<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png"></image>
			</view>
		</view>
		<view class="list_item" @tap="timeShow = true">
			<view class="item_left">出生年月</view>
			<view class="item_right">
				<text>{{userData.birthday || '未设置'}}</text>
				<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png"></image>
			</view>
		</view>
		<view class="list_item" @tap="navigateTo(`./personal-data-second?type=profession&text=${userData.profession}`)">
			<view class="item_left">职业</view>
			<view class="item_right">
				<text>{{userData.profession || '暂无'}}</text>
			</view>
		</view>
		<view class="list_item" @tap="navigateTo(`./personal-data-second?type=wxnumber&text=${userData.wxnumber}`)">
			<view class="item_left">微信号</view>
			<view class="item_right">
				<text>{{userData.wxnumber || '暂无'}}</text>
			</view>
		</view>
		<view class="list_item" @tap="navigateTo(`./personal-data-second?type=qqnumber&text=${userData.qqnumber}`)">
			<view class="item_left">QQ号</view>
			<view class="item_right">
				<text>{{userData.qqnumber || '暂无'}}</text>
			</view>
		</view>

		<u-button class="save_btn" shape="circle" :ripple="true" ripple-bg-color="#444" @tap="saveData">保存</u-button>

		<!-- 时间选择器 -->
		<u-picker mode="time" v-model="timeShow" :end-year="endYear" :params="params" @confirm="selectTime"></u-picker>
		<u-picker mode="selector" :range="selector" v-model="genderShow" :default-selector="[0]"
			@confirm="selectGender"></u-picker>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				// 头像地址
				avatar: '',
				// 用户数据
				userData: {
					username: '',
					nickname: '',
					gender: '',
					birthday: '',
					profession: '',
					wxnumber: '',
					qqnumber: ''
				},
				// 时间选择器显隐
				timeShow: false,
				// 时间选择器参数
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				// 性别选择器显隐
				genderShow: false,
				// 性别选择器参数
				selector: ['男', '女']
			}
		},
		computed: {
			endYear() {
				let year = new Date().getFullYear()
				return year
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;

			uni.$on('getBack', (res) => {
				this.userData[res.type] = res.text
			})
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				that.getUserInfo()
			},
			// 获取用户信息
			getUserInfo() {
				uni.vk.callFunction({
					url: 'user/kh/getMyUserInfo',
					title: '获取中...',
					success(data) {
						let info = data.userInfo
						that.userData = {
							username: info.username,
							nickname: info.nickname,
							gender: info.gender,
							birthday: info.birthday,
							profession: info.profession,
							wxnumber: info.wxnumber,
							qqnumber: info.qqnumber
						}
						that.avatar = info.avatar
					}
				});
			},
			// 选择头像
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.avatar = res.tempFilePaths[0]
					}
				})
			},
			// 时间选择完成
			selectTime(e) {
				that.userData.birthday = e.year + '-' + e.month + '-' + e.day
			},
			// 性别选择完成
			selectGender(e) {
				that.userData.gender = e[0] + 1
			},
			// 先保存头像
			saveData() {
				if (!this.avatar) return that.saveOtherInfo('')
				// 头像已存入云端
				if (this.avatar.indexOf('blob') == -1 && this.avatar.indexOf('localhost') == -1) {
					that.saveOtherInfo(this.avatar)
					return
				}
				vk.callFunctionUtil.uploadFile({
					title: "上传中...",
					filePath: this.avatar,
					suffix: "png",
					provider: "unicloud",
					success: async res => {
						const urls = await uniCloud.getTempFileURL({ fileList: [res.fileID] })
						const url = urls.fileList[0];

						if (url.tempFileURL) {
							that.saveOtherInfo(url.tempFileURL)
						} else {
							this.$refs.uToast.show({ title: '头像上传失败', type: 'warning' })
						}
					}
				});
			},
			// 保存剩余信息
			saveOtherInfo(url) {
				uni.vk.callFunction({
					url: 'user/kh/updateUser',
					title: '处理中',
					data: {
						avatar: url,
						nickname: this.userData.nickname,
						gender: Number(this.userData.gender),
						birthday: this.userData.birthday,
						profession: this.userData.profession,
						wxnumber: this.userData.wxnumber,
						qqnumber: this.userData.qqnumber
					},
					success: function(data) {
						// 通知我的页面刷新
						uni.$emit('relogin', { msg: '重新登录' })
						that.$refs.uToast.show({
							title: '保存成功',
							type: 'success',
							duration: 1000,
							back: true
						})
					}
				});
			}
		},
		onUnload() {
			uni.$off('getBack')
		}
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		height: 100vh;
		background-color: #F5F5F5;
		padding-top: 20rpx;
	}

	.list_item {
		height: 112rpx;
		background: #FFFFFF;
		margin-bottom: 2rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;

		.item_left {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}

		.item_right {
			display: flex;
			align-items: center;

			image {
				margin-left: 16rpx;
				width: 16rpx;
				height: 28rpx;
			}

			.avatar_upload {
				width: 82rpx;
				height: 82rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: rgb(244, 245, 246);
				border: 1px solid #ebecee;

				/deep/ view {
					width: 100% !important;
					height: 100% !important;
					margin: 0 !important;
					border: none !important;
				}

				.slot-btn {
					width: 100% !important;
					height: 100% !important;
				}
			}
		}
	}

	.save_btn {
		background-color: #333333;
		color: #FFFFFF;
		margin: 192rpx 30rpx 0;
	}
</style>
